<template>
  <div class="order-info">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="返回"
      sub-title="订单详情"
      @back="back"
    />
    <a-steps :current="currentState" style="padding: 30px 40px">
      <a-step>
        <!-- <span slot="title">Finished</span> -->
        <template #title> 提交订单 </template>
        <template #description>
          <span>2018-09-15 12:24:27</span>
        </template>
      </a-step>
      <a-step>
        <!-- <span slot="title">Finished</span> -->
        <template #title> 支付订单 </template>
        <template #description>
          <span></span>
        </template>
      </a-step>
      <a-step>
        <!-- <span slot="title">Finished</span> -->
        <template #title> 订单发货 </template>
        <template #description>
          <span></span>
        </template>
      </a-step>
      <a-step>
        <!-- <span slot="title">Finished</span> -->
        <template #title> 确认收货 </template>
        <template #description>
          <span></span>
        </template>
      </a-step>
      <a-step>
        <!-- <span slot="title">Finished</span> -->
        <template #title> 完成评价 </template>
        <template #description>
          <span></span>
        </template>
      </a-step>
    </a-steps>
    <div class="info-main">
      <header>
        <span
          ><InfoCircleOutlined /> 当前订单状态:<i>{{ curTest }}</i></span
        >
      </header>
      <div class="title"><TagOutlined /> 基本信息</div>
      <div class="context">
        <a-row :gutter="[16, 16]">
          <a-col :span="6">
            <a-card title="订单编号" :bordered="false">
              <p>{{ orderInfo.orderId }}</p>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card title="用户账号" :bordered="false">
              <p>{{ orderInfo.cusId }}</p>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card title="物流单号" :bordered="false">
              <p v-if="currentState >= 2">{{ orderInfo.logisticsId }}</p>
              <p v-else>暂无单号</p>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card title="自动确认收货时间" :bordered="false">
              <p>15天</p>
            </a-card>
          </a-col>
        </a-row>
      </div>
      <div class="title"><IdcardOutlined /> 收货人信息</div>
      <div class="context">
        <a-row :gutter="[16, 16]">
          <a-col :span="6">
            <a-card title="收货人" :bordered="false">
              <p>{{ addr.addrConsignee }}</p>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card title="手机号码" :bordered="false">
              <p>{{ addr.addrTel }}</p>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card title="邮政编码" :bordered="false">
              <p>{{ addr.addrPost }}</p>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card title="收货地址" :bordered="false">
              <p>{{ addr.location }}</p>
            </a-card>
          </a-col>
        </a-row>
      </div>
      <div class="title"><ShoppingOutlined /> 药品信息</div>
      <div class="context">
        <a-table
          :columns="pro_columns"
          :data-source="pro_data"
          bordered
          ellipsis
          rowKey="proId"
          style="margin-top: 10px"
          size="small"
          :pagination="false"
        >
          <template #proIcon="{ record }">
            <a-image :width="72" :src="record.proIcon" />
          </template>
          <template #price="{ record }">
            <p>{{ "售价:￥" + record.proPrice }}</p>
            <p>{{ "货号:" + record.proId }}</p>
          </template>
          <template #priceTotal="{ record }">
            <p>{{ "￥" + (record.proCount * record.proPrice).toFixed(2) }}</p>
          </template>
        </a-table>
      </div>
      <div class="title"><PayCircleOutlined /> 费用信息</div>
      <div class="context">
        <a-row :gutter="[16, 16]">
          <a-col :span="6">
            <a-card title="药品合计" :bordered="false">
              <p>
                ￥{{
                  orderInfo.orderMoney > 99
                    ? orderInfo.orderMoney
                    : (orderInfo.orderMoney - 10).toFixed(2)
                }}
              </p>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card title="运费" :bordered="false">
              <p>￥{{ orderInfo.orderMoney > 99 ? 0 : 10 }}</p>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card title="订单总金额" :bordered="false">
              <p style="color: red">￥{{ orderInfo.orderMoney }}</p>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card title="应付款金额" :bordered="false">
              <p style="color: red">￥{{ orderInfo.orderMoney }}</p>
            </a-card>
          </a-col>
        </a-row>
      </div>
      <div class="title"><TagsOutlined /> 操作信息</div>
      <div class="context">
        <a-table
          :columns="opera_columns"
          :data-source="opera_data"
          bordered
          ellipsis
          rowKey="operationId"
          style="margin-top: 10px"
          size="small"
          :pagination="false"
        >
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  TagOutlined, //基本信息
  IdcardOutlined, //收货人
  PayCircleOutlined, //费用信息
  ShoppingOutlined, //药品信息
  TagsOutlined, //操作信息
  InfoCircleOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import Base64 from "base-64";
const pro_columns = [
  {
    title: "图片",
    key: "proIcon",
    align: "center",
    slots: { customRender: "proIcon" },
  },
  {
    title: "药品名",
    dataIndex: "proName",
    key: "proName",
    align: "center",
  },
  {
    title: "价格/货号",
    key: "price",
    align: "center",
    slots: { customRender: "price" },
  },
  {
    title: "数量",
    key: "proCount",
    dataIndex: "proCount",
    align: "center",
    slots: { customRender: "proCount" },
  },
  {
    title: "总价",
    key: "priceTotal",
    align: "center",
    slots: { customRender: "priceTotal" },
  },
];

const pro_data = [];

const opera_columns = [
  {
    title: "操作人ID",
    key: "adminId",
    dataIndex: "adminId",
    align: "center",
  },
  {
    title: "时间",
    key: "operationTime",
    dataIndex: "operationTime",
    align: "center",
  },
  {
    title: "操作描述",
    key: "operationDes",
    dataIndex: "operationDes",
    align: "center",
  },
];
const opera_data = [];
export default {
  components: {
    TagOutlined,
    IdcardOutlined,
    PayCircleOutlined,
    ShoppingOutlined,
    TagsOutlined,
    InfoCircleOutlined,
  },

  data() {
    return {
      pro_data,
      pro_columns,
      opera_columns,
      opera_data,
      orderInfo: {},
      addr: {},
    };
  },
  activated() {
    this.init();
  },
  computed: {
    currentState() {
      if (null != this.orderInfo.orderRateTime) {
        return 4;
      } else if (null != this.orderInfo.orderReceiveTime) {
        return 3;
      } else if (null != this.orderInfo.orderDeliverTime) {
        return 2;
      } else if (null != this.orderInfo.orderPayTime) {
        return 1;
      } else if (null != this.orderInfo.orderCreateTime) {
        return 0;
      }
    },
    curTest() {
      if (5 == this.orderInfo.orderState) {
        return "已关闭";
      } else if (4 == this.orderInfo.orderState) {
        return "已完成";
      } else if (3 == this.orderInfo.orderState) {
        return "已发货";
      } else if (2 == this.orderInfo.orderState) {
        return "待发货";
      } else if (1 == this.orderInfo.orderState) {
        return "等付款";
      }
    },
  },
  mounted() {},
  methods: {
    init() {
      this.orderInfo = JSON.parse(
        decodeURIComponent(Base64.decode(this.$route.query.orderInfo))
      );
      console.log(
        JSON.parse(
          decodeURIComponent(Base64.decode(this.$route.query.orderInfo))
        )
      );
      this.pro_data = JSON.parse(this.orderInfo.proInfo).proList;
      console.log(this.pro_data);

      this.$axios
        .get("common/address/addrById?addrId=" + this.orderInfo.addrId)
        .then((res) => {
          if (res.data.code == 2000) {
            console.log(res.data.data);

            this.addr = {
              location:
                res.data.data.addrProvince +
                res.data.data.addrCity +
                res.data.data.addrDistrict +
                res.data.data.addrTowns,
              addrTel: res.data.data.addrTel,
              addrPost: res.data.data.addrPost,
              addrConsignee: res.data.data.addrConsignee,
            };
          } else {
          }
        });

      this.$axios
        .get("admin/shopOrder/option?oId=" + this.orderInfo.orderId)
        .then((res) => {
          if (res.data.code == 2000) {
            console.log(res.data.data);
            this.opera_data = res.data.data;
          } else {
          }
        });
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.order-info {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.info-main {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  transition: 0.3s;
}
.info-main header {
  background: #f2f6fc;
  height: 80px;
  padding-left: 20px;
  line-height: 80px;
  font-size: 18px;
}
.info-main header i {
  color: #f56c6c;
}
.info-main .title {
  padding-left: 20px;
  margin-top: 20px;
  font-size: 14px;
  color: #606266;
}

.info-main .context {
  background-color: #f2f6fc;
  padding: 20px;
  margin-top: 20px;
}
</style>